<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章草稿箱</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no,minimum-scale=1.0">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>

    <style rel="stylesheet" type="text/css">
        .content {
            margin-right: 5px;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            window.setInterval('showRealTime()', 1000);
        }
    </script>
</head>
<body class="layui-layout-body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>文章草稿箱</legend>
</fieldset>


<div class="layui-body" style="left: 13px;margin-top: 68px;">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <!--<button class="layui-btn layui-btn-primary layui-btn-sm layui-bg-gray"><i class="layui-icon">删除文章</i></button>-->
        <!--<button class="layui-btn layui-btn-sm ">文章发布</button>-->
        <div class="content">
            <table class="layui-hide" id="test" lay-filter="demo"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">发布</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
</div>

</body>
<script src="/layui/layui.all.js"></script>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

    });
</script>
<script type="text/javascript">
    layui.config({
        version: '1531663423583' //为了更新 js 缓存，可忽略
    });
    layui.use(['laypage', 'table', 'element'], function () {
        var laypage = layui.laypage //分页
            , table = layui.table //表格
            , element = layui.element; //元素操作
        table.render({
            elem: '#test'
            , height: 500
            , url: '/getdrafts.action' //数据接口
            , page: true //开启分页

            , cols: [[ //表头
                {field: 'aid', title: 'ID', width: 80, sort: false, fixed: 'left'}
                , {field: 'uid', title: '用户名ID', width: 120}
                , {field: 'title', title: '标题', width: 80, sort: false}
                , {field: 'content', title: '正文', width: 80, sort: false}
                , {field: 'tag', title: '标记', width: 80, sort: false}
                , {field: 'publishDate', title: '发布时间', width: 120, sort: false}
                , {field: 'sendstate', title: '未发送', width: 120, sort: false}
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
            ]]
        });
        //监听工具条
        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layui.use('layer', function () {
                    var strdata = JSON.parse(JSON.stringify(data));
                    layer.open({
                        type: 1,
                        area: ['400px', '360px'],
                        shadeClose: true, //点击遮罩关闭
                        content: '<div class="layui-form-item">\n' +
                        '        <label class="layui-form-label">标题</label>\n' +
                        '        <div class="layui-input-block">\n' +
//                          '            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" style="width: auto">\n' +
                        '        <label class="layui-form-label">' + (JSON.parse(JSON.stringify(data)))['title'] + '</label>\n' +
                        '        </div>\n' +
                        '    </div>\n' +
                        '    <div class="layui-form-item">\n' +
                        '        <label class="layui-form-label">发布时间</label>\n' +
                        '        <div class="layui-input-block">\n' +
                        '        <label class="layui-form-label">' + (JSON.parse(JSON.stringify(data)))['publishDate'] + '</label>\n' +
                        '        </div>\n' +
                        '    </div>\n' +
                        '    <div class="layui-form-item layui-form-text">\n' +
                        '        <label class="layui-form-label">文章内容</label>\n' +
                        '        <div class="layui-input-block">\n' +
                        '            <textarea name="desc" placeholder="请输入内容" class="layui-textarea" style="width: auto">' + (JSON.parse(JSON.stringify(data)))['content'] + '</textarea>\n' +
                        '        </div>\n' +
                        '    </div>\n'
                    });

                });

            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    var strdata = JSON.parse(JSON.stringify(data));
                    var deleteId = strdata['aid'];
                    $.ajax({
                        url: "/deletearticle",
                        type: "POST",
                        data: "id=" + deleteId
                    }).done(
                        function (data) {
                            if (data.msg === 0) {
                                window.alert("删除失败!");
                            } else {
                                window.alert("删除成功");
                            }
                        }
                    ).fail()
                });
            } else if (layEvent === 'edit') {
                var index = layer.open({
                    type: 1,
                    area: ['400px', '360px'],
                    shadeClose: true, //点击遮罩关闭
                    content: '<div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">标题</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <input type="text" name="title" required  lay-verify="required" value="' + (JSON.parse(JSON.stringify(data)))['title'] + '" autocomplete="off" class="layui-input  title" style="width: auto" >\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">发布时间</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '        <label class="layui-form-label  pd" id="clock" style="width: auto"></label>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item layui-form-text">\n' +
                    '        <label class="layui-form-label">文章内容</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <textarea name="desc" placeholder="请输入内容" class="layui-textarea con" style="width: auto">' + (JSON.parse(JSON.stringify(data)))['content'] + '</textarea>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <button class="layui-btn submit" lay-submit lay-filter="formDemo" onclick="publish()">发布</button>\n' +
                    '             <button type="layui-btn" class="layui-btn layui-btn-primary">取消</button>\n' +
                    '        </div>\n' +
                    '    </div>'
                });
                var id = (JSON.parse(JSON.stringify(data)))['aid'];
                layer.title(id, index);
            }
        });
        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页');
                }
            }
        });
    });
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });

    //设置时间
    function showRealTime() {
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        var date = d.getDate();
        var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
        var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
        var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
        var now = year + "年" + month + "月" + date + "日" + "<br>" + hour + ":" + min + ":" + sec;
        if (document.getElementById("clock")) {
            clock.innerHTML = now;
        }

    };

    function publish() {
        var $ = layui.jquery;
        var title = $(".title").val();
        var publish = $(".pd").text();
        var con = $(".con").val();
        var tt = $('.layui-layer-title').text();
        var formdata = 'title=' + title + '&publish=' + publish + '&content=' + con + '&id=' + tt;
        layer.closeAll(); //疯狂模式，关闭所有层
        $.ajax({
            url: "/publishcontent.action",
            type: "POST",
            data: formdata
        }).done(
            function (data) {
                if (data.msg === "发送成功") {
                    window.alert("发送成功");
                } else {
                    window.alert("发送失败");
                }
            }
        ).fail();


    }
</script>
</html>
